<template>
    <div>
        <div>firstName:<input type="text" v-model="firstName"></div>
        <div>lastName:<input type="text" v-model="lastName"></div>
        <div>fullName:<input type="text" v-model="fullName"></div>
    </div>
</template>
<script lang='ts' setup>
    import {ref,computed} from 'vue'
    const firstName=ref<string>('Jone')
    const lastName=ref<string>('Done')
    const fullName=computed({
       get(){
         return firstName.value+" "+lastName.value
       },
       set(arg){
         firstName.value=arg.split(" ")[0]
         lastName.value=arg.split(" ")[1]
       }
    })

</script>
<style lang='scss' scoped>
</style>